<!DOCTYPE HTML)
<html>
	<head>
		<title>跟随鼠标移动div</title>
		<meta charset='utf-8'>
		
		<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width:780px;
			margin:10px auto;
		}

		#big {
			
			position: absolute;
			display: none;
			width: 400px;
			height: 400px;
			top:0px;
			left:0px;
			border:2px solid #999 ;

		}

	

			li{
				width:170px;
				height: 170px;
				float:left;
				cursor: pointer;
				border:2px solid #f0f0f0;
				margin-right: 20px;
			}

			li:hover {
				outline:2px solid red;
				/*border:2px solid red;*/
			}

			.clearfix:after {
				content: '.';
				height: 0;
				visibility: hidden;
				display: block;
				clear: both;
			}
		</style>


	</head>

	<body>
		<div id="box">
			<ul class='clearfix'>
				<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_1.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_2.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_3.jpg" alt=""></li>
				<li><img src="http://js.fgm.cc/learn/lesson5/img/shirt_4.jpg" alt=""></li>
			</ul>
		</div>

		<div id="big">
			<div style='display:none';></div>
			<img src="http://js.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" alt="" id='bigPic'>
		</div>
	</body>

	<script>

		var oLi = document.getElementsByTagName('li');
		var oBig = document.getElementById('big');
		var oImg = document.querySelectorAll('#box img');
		var oBigImg = document.querySelectorAll('#big img')[0];

		// var oImg=[];
		// for(var i in oLi) oImg[i] =  oLi[i].getElementsByTagName('img'); 不能用啊……
		// for(var i in oLi) oImg[i] =  oLi[i].childNodes;

		console.log(oImg);
		window.onload=function() {
			for(var i = 0 ; i< oImg.length;i++) {
				// oImg[i].onmouseover=function(){
					
				// }
				oImg[i].onmousemove=function(e) {
					oBig.style.display='block';
					var e = e || window.event;
					oBigImg.src = e.srcElement.src.toString().replace('.jpg','_big.jpg');

					var xp = e.clientX;
					var yp = e.clientY;
					// console.log('X：'+e.clientX+'Y：'+e.clientY);
					oBig.style.top = yp+50+'px';
					oBig.style.left= xp+20+'px';
				}

				oImg[i].onmouseout=function(e) {
					oBig.style.display='none';
				}
			}
		}

		function showBig(src) {
			// src.style.border='2px solid red';
		}
		

	</script>
	
		
</html>